﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Vue-cli plugin </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Vue-cli plugin ">
    <meta name="generator" content="docfx 2.40.7.0">
    
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../styles/docfx.css">
    <link rel="stylesheet" href="../styles/main.css">
    <meta property="docfx:navrel" content="../toc.html">
    <meta property="docfx:tocrel" content="toc.html">
    
    
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../index.html">
                <img id="logo" class="svg" src="../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">

<a href="https://github.com/NeutroniumCore/Neutronium" target="_blank">
  <img style="position: fixed; top: 0; right: 0; border: 0; z-index:99999" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a>
<h1 id="vue-cli-plugin">Vue-cli plugin</h1>
<p>Neutronium provides a vue-cli 3 plugin <a href="https://github.com/NeutroniumCore/vue-cli-plugin-neutronium">vue-cli-plugin-neutronium</a> that provides many advantages to develop large project with Neutronium vue:</p>
<ul>
<li>During development use web-pack-dev-server and chrome to create the UI</li>
<li>Use ES6, sass, less...</li>
<li>Decompose your project in easy to maintain vue files during development</li>
<li>Use npm to manage your dependencies</li>
<li>Use Webpack build to generate all files you need to reference in Neutronium</li>
</ul>
<p>See <a href="https://github.com/NeutroniumCore/vue-cli-plugin-neutronium">vue-cli-plugin-neutronium Readme</a> for complete description.</p>
<p>To install neutronium  vue template use <a href="https://cli.vuejs.org/">vue-cli 3</a>
If not installed, install first vue-cli:</p>
<pre><code class="lang-bash">$ npm install -g vue-cli
</code></pre>
<p>Then in the view folder create your project</p>
<pre><code class="lang-bash">$ vue create main
$ cd main
$ vue add neutronium
$ npm install
$ npm run serve
</code></pre>
<h2 id="npm-scripts">npm scripts</h2>
<pre><code class="lang-bash">npm run serve
</code></pre>
<p>Debug your view in the browser. Main view model data are provided by cjson (circular JSON) file: data\vm.cjson</p>
<pre><code class="lang-bash">npm run live
</code></pre>
<p>Serve locally view that can be used in live reload setting with Neutronium.</p>
<pre><code class="lang-bash">npm run build
</code></pre>
<p>Generate files ready to be used in Neutronium in the dist folder: you have to reference these files (Content/Copy Always) in visual studio.</p>
<h2 id="step-by-step-installation">Step by step installation</h2>
<h3 id="1-open-folder-where-you-want-to-install-the-view-from-vs">1. Open folder where you want to install the view from VS<br></h3>
<p><img src="../images/large/webpack_01.png" height="550px"><br></p>
<h3 id="2-install-template">2. Install template</h3>
<pre><code class="lang-bash">$ vue create main
</code></pre>
<p><img src="../images/large/webpack_02a.png" alt="">
<img src="../images/large/webpack_02b.png" alt=""></p>
<pre><code class="lang-bash">$ cd main
$ vue add neutronium
</code></pre>
<p><img src="../images/large/webpack_02d.png" alt=""></p>
<h3 id="3-choose-the-correct-options">3. Choose the correct options:</h3>
<p><img src="../images/large/webpack_02f.png" alt=""></p>
<h3 id="4-begin-developing-the-view-using-hot-reload-you-may-use-atom-or-sublime-to-edit-js-files">4. Begin developing the view using hot-reload (you may use atom or sublime to edit js files)</h3>
<pre><code class="lang-bash">$ npm install
$ npm run serve
</code></pre>
<p><img src="../images/large/webpack_05.png" alt=""></p>
<h3 id="5-once-the-view-is-ready-build-the-files">5. Once the view is ready build the files</h3>
<pre><code class="lang-bash">$ npm run build
</code></pre>
<p><img src="../images/large/webpack_06.png" alt=""></p>
<h3 id="6-include-the-files-in-vd">6. Include the files in VD<br></h3>
<ul>
<li><p>Click show all files<br>
<img src="../images/large/webpack_07.png" alt=""><br><br>
<img src="../images/large/webpack_08.png" alt=""><br></p>
</li>
<li><p>Include the files in project: DO NOT INCLUDE files under node_modules<br>
<img src="../images/large/webpack_09.png" alt=""><br><br>
<img src="../images/large/webpack_10.png" alt=""><br></p>
</li>
<li><p>Set Properties on dist files:</p>
<ul>
<li>Build Action: <code>Resource</code></li>
<li>Copy To Folder: <code>None</code><br></li>
<li><code>.legacy.</code> files in dist folder don't need to be included in the project<br><br>
<img src="../images/large/webpack_11.png" alt=""><br></li>
</ul>
</li>
</ul>
<h3 id="7-run-c-application">7. Run C# application<br></h3>
<p><img src="../images/large/webpack_12.png"><br></p>
<h2 id="folder-organization">Folder organization</h2>
<pre><code class="lang-bash">├── data
├── dist
├── src
│   ├── asset
│   ├── components
│   ├── App.vue
│   ├── entry.js
│   ├── install.js
│   └── main.js
├── index.hml
</code></pre>
<p><code>Data</code>: contains the vm.cjson which is the viewmodel data used during development in the browser.
<code>dist</code>: contains generated files to be used in Neutronium
<code>src</code>: contains assets (folder assets), vue components (folder components), main component: App.vue.
You should not edit <code>entry.js</code> nor <code>main.js</code> which are boilerplate files needed for the dev and production build.
Both index.html files (fromm root and dist) should not be edited for the same reason.</p>
<h2 id="main-file">Main file:</h2>
<p>App.Vue represent the main entry of the vue application, its prop ``mainViewModel``` represent the C# viewModel</p>
<h3 id="installjs-file">Install.js file</h3>
<p>If you need to register globally plugin in Vue instance use install.js.
Example:</p>
<pre><code class="lang-javascript">import Notifications from 'vue-notification'

function install(vue) {
    vue.use(Notifications)
}

export {
    install
} 
</code></pre>
<p>For version &gt;=1.0.0, it is also possible to use install.js to set Vue instance options.
This is needed if you want to use mixins, or some popular tools such as <a href="https://router.vuejs.org/en/">vue-router</a> or <a href="https://github.com/kazupon/vue-i18n">vue-i18n</a>.
To do so you need to export a vueInstanceOption function returning Vue instance option.</p>
<p>Example:</p>
<pre><code class="lang-javascript">import VueI18n from 'vue-i18n'
import {messages} from './messages'

function install(vue) {
    //Call vue use here if needed
    vue.use(VueI18n);
}

function vueInstanceOption() {
    const i18n = new VueI18n({
        locale: 'ru', // set locale
        messages, // set locale messages
    });

    //Return vue global option here, such as vue-router, vue-i18n, mix-ins, .... 
    return {i18n}
}

export {
    install,
    vueInstanceOption
} 
</code></pre>
<h2 id="tips">Tips:</h2>
<p>You can generate a Json from viewModel captured in a Neutronium debug session using <a href="../articles/debug.html">Neutronium debug tools</a> and use it as data.json in order to create the view with a realistic ViewModel.</p>
<p><img src="../images/tools/ContextMenu-Save-vm.png" alt="SaveVM"></p>
</article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="https://github.com/NeutroniumCore/Neutronium/blob/master/Documentation/Neutronium.Documentation/tools/vue-cli-plugin.md/#L1" class="contribution-link">Improve this Doc</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            
            <span>Generated by <strong>DocFX</strong></span>
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../styles/docfx.js"></script>
    <script type="text/javascript" src="../styles/main.js"></script>
  </body>
</html>
